<template>
  <div class="home">
    <el-card>
      <h2>常用功能</h2>
      <ul class="often-features">
        <li>
          <el-button type="primary" @click="hostbtn('/audit')">审核列表</el-button>
        </li>
        <li>
          <el-button type="primary" @click="hostbtn('/appointment')">预约列表</el-button>
        </li>
        <li>
          <el-button type="primary" @click="hostbtn('/offline')">线下预约管理</el-button>
        </li>
        <li>
          <el-button type="primary" @click="hostbtn('/batchList')">证书批次列表</el-button>
        </li>
        <li>
          <el-button type="primary" @click="hostbtn('/certificateList')">证书列表</el-button>
        </li>
      </ul>
    </el-card>
    <!-- 图表展示 -->
    <section class="charts">
      <ul>
        <li class="charts-title">
          <el-row>
            <el-col :span="12" :offset="6" class="charts-title-main">{{year}}年{{province}}登记表</el-col>
            <el-col :span="6" class="charts-title-button">
              <el-select
                v-model="province"
                class="elSelect"
                placeholder="请选择省份"
                clearable
                @change="changeProvince"
              >
                <el-option
                  v-for="(item,index) in proviceOption"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </li>
        <li class="canvas-container">
          <v-chart :options="chartOptions"></v-chart>
          <div v-if="isEmpty" class="emty-data">无数据</div>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import Chart from "vue-echarts";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/chart/pie";
import reutrnstaticVue from '../components/statistics/reutrnstatic.vue';
import City from "@/assets/js/city";
var oldarr = [
  ['1月', '', ''],
  ['2月', '', ''],
  ['3月', '', ''],
  ['4月', '', ''],
  ['5月', '', ''],
  ['6月', '', ''],
  ['7月', '', ''],
  ['8月', '', ''],
  ['9月', '', ''],
  ['10月', '', ''],
  ['11月', '', ''],
  ['12月', '', '']
];
export default {
  components: {
    "v-chart": Chart,
  },
  data() {
    return {
      // menuKey: 1,
      arrState: '',
      chartOptions: {
        legend: {},
        tooltip: {},
        title: [
          {
            text: "年度报表汇总",
            left: "5%",
            top: "0",
          },
          {
            subtext: "办理数量",
            left: "8%",
            top: "5%",
            textAlign: "center",
          },
          {
            subtext: "月份",
            left: "91%",
            top: "83%",
            textAlign: "center",
          }
        ],
        dataset: {
          source: [
            ['type', '新申请', '后续'],
            ...oldarr
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar' },
          { type: 'bar' }
        ]
      },

      proviceOption: [],  // 省份列表
      year: String((new Date()).getFullYear()), // 年份
      province: '四川省', // 城市
      isEmpty: false, // 无数据框
    };

  },
  watch: {
    arrState(value) {
      //console.log("变化了")
      //console.log(value)
    }
  },
  computed: {
    bgdate() {
      return `${this.year}-01-01`;
    },
    eddate() {
      return `${this.year}-12-31`;
    },
  },
  methods: {
    // 获取图标信息
    requerstData() {
      var arr = JSON.parse(JSON.stringify(oldarr))
      this.isEmpty = false;
      this.$http.get("/trademark/report/province", {
        params: {
          type: 1, // 省内报表0 省外报表1
          province: this.province,  // 省份
          bgdate: this.bgdate, // 年头
          eddate: this.eddate, // 年尾
          pageSize: 1, // 页尺寸
          pageNum: 1,  // 页码
        }
      }).then(({ data: res }) => {
        if (res.code !== 200) return this.$message.error("获取数据信息失败");
        // 查询的数据不为空
        if (res.data.list[0] != null) {
          // ++this.menuKey;
          arr.forEach((arr, i) => {
            arr[1] = String(res.data.list[0]['month' + (i + 1) + 1]);
            arr[2] = String(res.data.list[0]['month' + (i + 1) + 2]);
          });
          this.chartOptions.dataset.source = [];
          this.chartOptions.dataset.source.push(['type', '新申请', '后续'], ...arr)
        } else {
          this.chartOptions.dataset.source = [];
          this.chartOptions.dataset.source.push(['type', '新申请', '后续'], ...oldarr);
          this.isEmpty = true;
        }
        // this.arrState = 
        // arr = this.arr
      }).catch(error => { });
    },
    // 常用功能按钮跳转
    hostbtn(route) {
      this.$router.push({
        path: route,
      });
    },
    // 获得省份
    getCity() {
      City.forEach(item => {
        this.proviceOption.push(item.label);
      })
    },
    // 切换城市
    changeProvince() {
      this.requerstData();
    },
  },
  created() {
    this.getCity();  // 获取城市列表
    this.requerstData();
  },
};
</script>
<style lang="less" scoped>
.home {
  .canvas-container {
    position: relative;
    .emty-data {
      width: 50px;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }

  .el-card {
    // margin: 30px;
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #666;
    h2 {
      font-size: 22px;
      font-weight: bold;
      padding: 10px 0;
    }
    .often-features {
      overflow: hidden;
      padding: 10px 0;
      li {
        float: left;
        margin: 0 15px;
      }
    }
  }
  .charts {
    background-color: #fff;
    box-shadow: 5px 5px 10px 1px #ccc;
    padding: 20px 0;
    ul {
      // display: flex;
      li {
        // flex: 1;
        .echarts {
          min-width: 1200px;
          // width: 1000px;
          height: 400px;
        }
      }
      .charts-title {
        padding: 20px 0;
        .charts-title-main {
          font-size: 24px;
          color: #333;
          text-align: center;
        }
        .charts-title-button {
          padding-right: 20px;
          display: flex;
          justify-content: space-between;
          .elSelect {
            margin-left: 10px !important;
          }
        }
      }
    }
    .el-main {
      padding: 0 !important;
    }
  }
}
</style>
